<template>
    <div id="Help-Bottom-Box">
        <div id="Help-Bottom-Content">
           <div class="block" v-for="(v) in this.$store.state.Help.Help" :key="v.id">
               <h2>{{v.key}}</h2>
               <ul>
                   <li v-for="(item) in v.value" :key="item.id">
                          <img :src="item.img" alt="" v-if="item.img!==''">
                          <p>{{item.text}}</p>
                          <span class="iconfont icon-ziyuan"></span>
                   </li>
               </ul>
           </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Help-Bottom"
    }
</script>

<style lang="scss" scoped>
    #Help-Bottom-Box{
    }
    #Help-Bottom-Content{
        .block{
            border-top: 0.12rem solid #ebebeb;
        }

        h2{
            height: 0.46rem;
            font-size: 0.15rem;
            line-height: 0.46rem;
            color: #878787;
            padding-left: 0.19rem;
        }

        ul{
            padding-left: 0.15rem;
            border-top: 0.02rem solid #f0f0f0;

            li{
                line-height: 0.22rem;
                font-size: 0.15rem;
                color:#000000;
                padding: 0.06rem 0;
                position: relative;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                img{
                    width: 0.3rem;
                    vertical-align: middle;
                    margin-right: 0.08rem;
                }
                p{
                    flex-grow: 1;
                    padding: 0.1rem 0;
                    border-top: 0.02rem solid #f0f0f0;
                }
                span{
                    display: block;
                    float: right;
                    font-size: 0.12rem;
                    color: #bfbfbf;
                    position: absolute;
                    right: 0.19rem;
                }
            }

            li:nth-of-type(1) p{
                line-height: 0.12rem;
                border-top-width: 0;
            }
        }
    }
</style>